<template>
  <div v-show="active" class="video-panel-root">
    <div class="menu">
      <el-button @click="onClose" type="danger" size="mini" icon="el-icon-close" circle></el-button>
    </div>
    <div v-show="readying" class="readying">
      <h3><i class="el-icon-loading"></i>&nbsp;录像数据准备中，请稍等...</h3>
    </div>
    <div v-show="!readying" id="player">
      <div id="display"></div>
    </div>
    <div v-show="!readying" class="controls">
      <input id="position-slider" type="range" />
      <el-button id="play-pause" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
      <span id="position">00:00</span> <span>/</span>
      <span id="duration">00:00</span>&nbsp;
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoPanel",
  components: {},
  data() {
    return {
      scale: 1,
      maxScale: 1,
      active: false,
      readying: true,
      tunnel: null,
      recording: null,
    };
  },
  methods: {
    onClose() {
      this.readying = true;
      this.active = false;
      this.$jquery("#display").html("");
      this.$jquery("#position").html("00:00");
      this.$jquery("#duration").html("00:00");
      if (this.tunnel) {
        if (this.recording.isPlaying()) {
          this.$jquery("#play-pause").click();
        }
      }
    },
    openVideo(uuid) {
      this.active = true;
      var player = document.getElementById("player");
      var display = document.getElementById("display");
      var playPause = document.getElementById("play-pause");
      var position = document.getElementById("position");
      var positionSlider = document.getElementById("position-slider");
      var duration = document.getElementById("duration");
      const token = this.$cookies.get("token");
      this.tunnel = new window.Guacamole.StaticHTTPTunnel("/webapi/auditvideo/file/get?uuid=" + uuid + "&token=" + token);
      this.recording = new window.Guacamole.SessionRecording(this.tunnel);
      var state0 = false;
      var state1 = false;
      this.tunnel.onstatechange = (state) => {
        if (state == 0) {
          state0 = true;
        }
        if (state == 1) {
          state1 = true;
        }
        if (state == 2 && state0 && state1) {
          this.$nextTick(() => {
            this.readying = false;
            this.updateDisplay();
            this.$jquery("#play-pause").click();
          });
        }
      };
      var zeroPad = (num, minLength) => {
        var str = num.toString();
        while (str.length < minLength) str = "0" + str;
        return str;
      };

      var formatTime = (millis) => {
        var totalSeconds = Math.floor(millis / 1000);
        var seconds = totalSeconds % 60;
        var minutes = Math.floor(totalSeconds / 60);
        return zeroPad(minutes, 2) + ":" + zeroPad(seconds, 2);
      };

      display.appendChild(this.recording.getDisplay().getElement());
      this.recording.connect();
      this.recording.onplay = () => {
        playPause.textContent = "暂停";
      };

      this.recording.onpause = () => {
        playPause.textContent = "播放";
      };

      display.onclick = playPause.onclick = () => {
        if (!this.recording.isPlaying()) this.recording.play();
        else this.recording.pause();
      };

      this.recording.onseek = (millis) => {
        position.textContent = formatTime(millis);
        positionSlider.value = millis;
      };

      this.recording.onprogress = (millis) => {
        duration.textContent = formatTime(millis);
        positionSlider.max = millis;
      };

      positionSlider.onchange = () => {
        this.recording.seek(positionSlider.value, function seekComplete() {
          player.className = "";
        });
        player.className = "seeking";
      };
    },
    updateDisplay() {
      if (this.readying) {
        return;
      }
      if (!this.recording.getDisplay().getWidth() || this.recording.getDisplay().getWidth() === 0) {
        setTimeout(() => {
          this.updateDisplay();
        }, 10);
        return;
      }
      this.scale = Math.min(document.body.clientWidth / Math.max(this.recording.getDisplay().getWidth(), 1), document.body.clientHeight / Math.max(this.recording.getDisplay().getHeight(), 1));
      this.maxScale = Math.max(this.scale, 3);
      if (this.recording.getDisplay().getScale() > this.maxScale) {
        this.scale = this.maxScale;
      }
      this.recording.getDisplay().scale(this.scale);
    },
  },
  mounted() {
    this.utils.on(this._uid, "event_audit_video_open", ({ id }) => {
      this.openVideo(id);
    });
    this.utils.on(this._uid, "refresh_client_wh", () => {
      this.updateDisplay();
    });
  },
  destroyed() {
    this.readying = true;
    this.active = false;
    this.utils.unon(this._uid, "event_audit_video_open");
    this.utils.unon(this._uid, "refresh_client_wh");
  },
};
</script>

<style>
.video-panel-root {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0px;
  background-color: #ffffff;
  overflow: hidden;
}

.video-panel-root .menu {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0.5;
  z-index: 10;
}

.video-panel-root .menu:hover {
  opacity: 1;
}

.video-panel-root .readying {
  padding-top: 200px;
  text-align: center;
  color: #606266;
}

#player {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

#player .notification-container {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#player .seek-notification {
  color: white;
  background: rgba(0, 0, 0, 0.75);
  display: none; /* Initially hidden */
  width: 100%;
  height: 100%;
}

#player.seeking .seek-notification {
  display: table;
}

#player .seek-notification p {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: sans-serif;
}

.video-panel-root .controls {
  position: fixed;
  width: 100%;

  /* IE10 */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-direction: row;

  /* Ancient Mozilla */
  display: -moz-box;
  -moz-box-align: center;
  -moz-box-orient: horizontal;

  /* Ancient WebKit */
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;

  /* Old WebKit */
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-flex-direction: row;

  /* W3C */
  display: flex;
  align-items: center;
  flex-direction: row;
  bottom: 0px;
}

.video-panel-root .controls > * {
  margin: 0.25em;
  bottom: 0px;
}

.video-panel-root .controls #position-slider {
  -ms-flex: 1 1 auto;
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

.video-panel-root .controls #play-pause {
  margin-left: 0;
}

.video-panel-root .controls #position,
.video-panel-root .controls #duration {
  font-family: monospace;
}

.video-panel-root .controls #duration {
  margin-right: 0;
}
</style>